<div>
  <form nz-form [formGroup]="validateForm" class="form-area">
    <div nz-row>
      <div nz-col nzSpan="8">
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="name">名称</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24" >
            <input nz-input formControlName="name" id="name" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="8">
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="status">状态</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <input nz-input formControlName="status" id="status" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="8" class="btn-action">
        <nz-form-item class="btn-item">
          <nz-space>
            <button *nzSpaceItem nz-button nzType="default" (click)="handleRest()">重置</button>
            <button *nzSpaceItem nz-button nzType="primary" (click)="handleSearch()">查询</button>
          </nz-space>
        </nz-form-item>
      </div>
    </div>
  </form>
  <nz-table class="mt-5" [nzTitle]="titleTemplate" #expandTable [nzData]="listOfMapData" nzTableLayout="fixed">
    <thead>
      <tr>
        <th>名称</th>
        <th>排序</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of expandTable.data">
        <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
          <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
            <td
              [nzIndentSize]="item.level! * 20"
              [nzShowExpand]="!!item.children"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)"
            >
              {{ item.name }}
            </td>
            <td>{{ item.key }}</td>
            <td class="action">
              <!-- (click)="handleOpen.handleOpen(data)" -->
              <a (click)="handleOpen.handleOpen(data)">编辑</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a
                nz-popconfirm
                nzPopconfirmTitle="Are you sure delete this task?"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="confirm(data.key)"
                (nzOnCancel)="cancel()"
                class="delete"
              >删除</a>
            </td>
          </tr>
        </ng-container>
      </ng-container>
    </tbody>
  </nz-table>
  <ng-template #titleTemplate>
    <div class="table-header">
      <span>部门列表</span>
      <button nz-button nzType="primary" class="add-btn" (click)="handleOpen.handleOpen()">
        <i nz-icon nzType="plus"></i> 
        新增部门
      </button>
    </div>
  </ng-template>
  <app-dept-modal #handleOpen></app-dept-modal>
</div>
